<template>
	<view class="loginSafe">
	<m-input :type="'account'" :placeholder="'请输入手机号'" v-model="params.mobile" :maxlength="11"></m-input>
	<m-input :type="'authCode'" :placeholder="'请输入验证码'" v-model="params.authCode" :maxlength="4">
		<button class="l-btn" :disabled="btnDis" @tap="handleSendCode()">{{btnText}}</button>
	</m-input>
	<m-input :type="'password'" :placeholder="'原密码(长度至少8位,含字母数字符号至少两种)'" v-model="params.oldPass" :maxlength="20"></m-input>
	<m-input :type="'password'" :placeholder="'新密码(长度至少8位,含字母数字符号至少两种)'" v-model="params.newPass" :maxlength="20"></m-input>
	<m-input :type="'password'" :placeholder="'确认密码'" v-model="params.surePass" :maxlength="20"></m-input>
	<button class="sure-btn" @tap="commit()">确认设置</button>
	</view>
</template>

<script>
	import MInput from '@/components/m-input.vue'
	export default{
		name:"loginSafe",
		data(){
			return{
				params:{
					mobile:"",
					authCode:"",
					oldPass:"",
					newPass:"",
					surePass:"",
				},
				btnText:"发送验证码",
				btnDis:false,
				t:null
			}
		},
		methods:{
			handleSendCode(){  // 点击发送验证码
				if(this.params.mobile===''){
					uni.showToast({
						title: "请输入手机号码",
						icon: "none",
					})
					return
				}
				let reg= /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
				if(!reg.test(this.params.mobile)){
					uni.showToast({
						title: "请输入正确的手机号码",
						icon: "none",
					})
					return
				}
				this.sendMobileCode()

			},
			countDown() {
				this.t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(this.t);
				this.btnText = `剩余${timer}s`;
				this.t = setInterval(() => {
					if (timer == 0) {
						clearInterval(this.t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `剩余${timer}s`;
				}, 1000)
			},

			//发送手机验证码
			async sendMobileCode(){
				uni.showLoading({})
				let resData=await this.$apis.getMobileCode({mobile:this.params.mobile})
				if(resData.code===0){
					this.countDown()
				}
				uni.hideLoading()
			},
			async commit(){ //提交信息
				if(this.params.mobile==='' || this.params.authCode==='' || this.params.newPass==='' || this.params.surePass==='' || this.params.oldPass===''){
					uni.showToast({
						title: "请将信息填写完整",
						icon: "none",
					})
					return
				}
				let reg= /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
				if(!reg.test(this.params.mobile)){
					uni.showToast({
						title: "请输入正确的手机号码",
						icon: "none",
					})
					return
				}
				if(this.params.newPass!==this.params.surePass){
					uni.showToast({
						title: "两次输入的新密码不一致",
						icon: "none",
					})
					return
				}
				let resData=await  this.$apis.updatePassword({
					mobile:this.params.mobile,
					code:this.params.authCode,
					old_password:this.params.oldPass,
					new_password:this.params.newPass,
					small_type:1
				})
				if(resData.code===0){
					uni.showToast({
						title: "操作成功",
						icon: "success",
					})
					let user_data = await this.$apis.getUserInfo({access_token:''})
					await this.$store.commit("SET_USERINFO",user_data.data)
					setTimeout(()=>{
						uni.reLaunch({
							url: '/pages/main/user'
						})
					},1000)
				}
			}

		},
		components:{
			MInput
		}
	}
</script>

<style lang="less" scoped>
	.loginSafe{
		.l-btn{
			box-sizing: border-box;
			width: 200rpx;
			height: 60rpx;
			line-height: 60rpx;
			align-self: center;
			color: #ffffff;
			font-size: 26rpx;
			padding: 0rpx 20rpx;
			/*background:linear-gradient(to top,rgba(236,69,55,1),rgba(251,171,102,1));*/
			background:linear-gradient(to top,#E76533,#F1A937);
		}
		.sure-btn{
			width: 400rpx;
			height: 80rpx;
			/*background:linear-gradient(to top,rgba(236,69,55,1),rgba(251,171,102,1));*/
			background-color: #FF9501;
			color: #ffffff;
			line-height: 80rpx;
			font-size: 34rpx;
			margin-top: 100rpx;
		}
		button::after{
			border: none;
		}
	}
</style>
